<template>
  <view class="order-detail" v-if="info.id">
    <view class="detail-status" v-if="info.status == 1">
			<countdown-timer :time="info.times*1000" :autoStart="true" @finish='handleBack'>
				<template v-slot="{hour, minute, second}">
					<view>还剩 <span style="margin:0 10rpx;" class="sub-theme">{{hour>9?hour:'0'+hour}}:{{minute>9?minute:'0'+minute}}:{{second>9?second:'0'+second}}</span> 订单自动取消</view>      
				</template>
			</countdown-timer>
    </view>
    <view class="detail-invitation" v-if="info.buyerAppointment == 0">
      <view class="h2">为避免到店排队，建议尽快预约</view>
      <view class="p">该项目需提前预约，预约后可随时改退</view>
      <view class="var-button" @click="handleToUrl(`/pages/family-doctor/invitation-submit?orderId=${info.id}`)">立即预约</view>
    </view>
    <view class="detail-invitation" v-if="info.buyerAppointment == 1">
      <view class="h2">预约时间：{{invitationInfo.appointmentStartTime}} - {{invitationInfo.appointmentEndTime}}</view>
      <view class="h2">预约医生：</view>
      <view class="doctor-item active">
        <image :src="invitationInfo.avatar || '../static/doctor-default.png'" mode="aspectFill" class="img"></image>
        <image src="@/static/check-on.png" mode="aspectFill" class="icon"></image>
        <view class="h2">{{invitationInfo.appointmentDoctor || '到店分配'}}</view>
      </view>
      <view class="var-button" @click="handleToUrl(`/doctorPackage/invitation-detail?id=${info.appointmentId}`)">查看预约</view>
    </view>
    <view class="detail-header">
      <view class="box-flex">
        <image :src="getMedia(info.storeLogo)" mode="aspectFill" class="header-img"></image>
        <view class="header-h2">{{info.storeName}}</view>
      </view>
      <view class="header-list">
        <view class="list-item" v-for="item in info.items" :key="item.orderItemId">
          <image :src="getMedia(item.mediaUrl)" mode="aspectFill" class="img"></image>
          <view class="item-info">
            <view class="info-h2">
              <view class="dot2">{{item.title}}</view>
              ￥{{item.totalPayment}}
            </view>
            <view class="info-p">购买时间:{{info.created}}</view>
          </view>
        </view>
      </view>
      <view class="header-code" :class="info.status == 4?'gray':''" v-if="info.status > 3">
        <uqrcode ref="uqrcode" canvas-id="qrcode" :value="info.orderNumber" size="100" :options="{ margin: 10 }"></uqrcode>
        <view class="code-info"><span class="line">券码 {{info.orderNumber}}</span> <span class="copy" @click="handleCopy(info.orderNumber)">复制</span></view>
      </view>
    </view>
    <template v-if="info.status > 3">
      <view class="detail-card detail-cate" v-for="(result,idx) in info.items" :key="idx">
        <view class="cate-p" v-for="item in result.privateParams" :key="item.paramsName">
          <view class="p-label">{{item.paramsName}}</view>
          <view class="p-span" v-for="ret in item.paramsValues" :key="ret">{{ret}}</view>
        </view>
      </view>
      <view class="detail-intro">
        <view class="intro-list title"><p>商品总价</p> ￥{{info.totalPrice}}</view>
        <view class="intro-list"><p>运费</p> ￥0</view>
        <view class="intro-list"><p>平台优惠 <span class="sub-theme">立减0元</span></p> -￥0</view>
        <view class="intro-list"><p>实付款</p> <span class="strong">￥{{info.totalPayment}}</span></view>
      </view>
    </template>

    <view class="detail-intro">
      <view class="intro-list"><p>订单号</p> {{info.id}} <span class="copy" @click="handleCopy(info.id)">复制</span></view>
      <!-- <view class="intro-list" @click="handleToUrl(`/minePackage/order-snapshot?id=${info.id}`)"><p>交易快照</p> 服务内容不符时，可作为判断依据 <uni-icons type="right" size="14" color="#6D6D6D"></uni-icons> </view> -->
      <view class="intro-list"><p>手机号</p> {{info.mobile}}</view>
      <view class="intro-list" v-if="info.status >3"><p>支付方式</p> 微信支付</view>
      <view class="intro-list"><p>下单时间</p> {{info.created}}</view>
      <view class="intro-list" v-if="info.paymentTime"><p>付款时间</p> {{info.paymentTime}}</view>
    </view>
    
    <view class="detail-footer" v-if="info.status == 1">
      <view class="button" @click="handleCancel(info.id)">取消订单</view>
      <view class="button var-button" @click="handlePay(info.id)">￥{{info.totalPayment}}继续支付</view>
    </view>
    <view class="detail-footer" v-if="info.status == 9">
      <view class="button cancel" v-if="info.items[0].isShowAdjustment" style="width: 340rpx;" @click="handleToSale()">{{info.items[0].isApplyAdjustment?'查看售后':'申请退款'}}</view>
      <view v-else></view>
      <view class="button button var-button" @click="handleToUrl(`/mainPackage/goods-detail?id=${info.items[0].productId}`)">再来一单</view>
    </view>
    <view class="detail-footer" v-if="info.status == 11">
      <view class="button cancel" v-if="info.items[0].isShowAdjustment" style="width: 30%;" @click="handleToSale()">{{info.items[0].isApplyAdjustment?'查看售后':'申请退款'}}</view>
      <view class="button cancel" style="width: 30%;" @click="handleToUrl(`/mainPackage/goods-detail?id=${info.items[0].productId}`)">再来一单</view>
      <view v-if="info.buyerComment == 0" class="button var-button" style="width: 30%;" @click="handleToUrl(`/minePackage/write-evaluation?orderId=${info.id}`)">去评价</view>
    </view>

  </view>
</template>

<script>
  import countdownTimer from '@/components/countdown-timer.vue'
  export default {
    components:{countdownTimer},
    data() {
      return {
        info:{},
        id:'',
        curData:{},
        invitationInfo:{},
        mapStatus:{
          1:'待付款',
          9:'待使用',
          11:'待评价',
          4:'已完成',
          3:'已取消',
          2:'已关闭'
        }
      }
    },
    onLoad(options) {
      this.id = options.id
    },
    onShow() {
      this._initData(this.id)
    },
    methods: {
      handleBack(){ //  返回上一页
        uni.navigateBack({
          delta:1,
          fail: () => {
            uni.reLaunch({
              url:'/pages/index/index'
            })
          }
        })
      },
      handleToUrl(url){
        uni.navigateTo({
          url
        })
      },
      handleToSale(){
        if(this.info.items[0].isApplyAdjustment){
          this.handleToUrl(`/minePackage/refund-detail?id=${this.info.id}`)
          return;
        }
        this.handleToUrl(`/minePackage/apply-refund?id=${this.info.id}`)
      },
      handleTakeTicket(e){  //  取电子票
        this.curData = e
        this.$refs.ticket.open()
      },
      handleCopy(data){
        if(data){
          uni.setClipboardData({
            data,
            success: () => {
              this.$toast('复制成功')
            }
          })
        }
      },
      handleOpenMap(){  // 打开地图
        wx.checkJsApi({
          jsApiList: ['openLocation'],
          success: (suc)=> {
            console.log('checkJsApi',suc)
            setTimeout(()=>{
              wx.openLocation({
                latitude: parseFloat(this.info.location.latitude),
                longitude: parseFloat(this.info.location.longitude),
                scale: 18,
                name:this.info.location.name,
                address:this.info.location.address,
                success(ret){
                  console.log(ret)
                },
                fail(err){
                  console.log(err)
                  location.reload();
                }
              });
            },400)
          },
          fail:err=>{
            console.log('checkJsApi',err)
          }
        });
      },
      handleCancel(e){  ///  取消订单
        uni.showModal({
          title:'确定取消付款?',
          content:'当前享受的优惠可能无法保留',
          success:async res=>{
            if(res.confirm){
              const ret = await this.$put(`/act/orders/cancel/${e}`)
              if(ret.code == '1'){
                this.$toast('取消成功','success')
                setTimeout(()=>{
                  this._initData()
                },1000)
              }else{
                this.$toast(ret.message)
              }
            }
          }
        })
      },
      async handlePay(e){   ///  立即支付
        const content = {
          appId:this.$mpAppid,
          openId:await uni.getOpenId(),
          orderId:e
        }
        this.$post('/order/users/orders/pay',content).then(ret=>{
          if(ret.code == '1'){
            let {content} = ret
            uni.requestPayment({
              timeStamp: content.timeStamp,
              nonceStr: content.nonceStr,
              package: content.package,
              signType: content.signType,
              paySign: content.paySign,
              success:res=>{
                uni.navigateTo({
                  url:`/pages/other/pay-result?id=${content.orderId}`
                })
              },
              fail:err=>{
                this.$toast('支付失败','none')
              }
            })
          }else{
            this.$toast(ret.message,'none')
          }
        })
      },
      
      ///    network
      _initData(id){
        uni.showLoading({
          title:'加载中...'
        })
        this.$get(`/product/myOrder/orderDetail/${id}`,'',1).then(res=>{
          if(res.code === '1'){
            uni.setNavigationBarTitle({
              title:this.mapStatus[res.content.status] || '订单详情'
            })
            if(res.content.appointmentId){
              this.$get('/yahe/appointment/getInfo',{
                id:res.content.appointmentId
              }).then(res=>{
                if(res.code == '1') this.invitationInfo = res.content
              })
            }
            this.info = res.content
            if(res.content.status == 1){
              const date = new Date(res.content.orderExpireTime).getTime() - Date.now()
              this.info.times = date>0?date:0
            }
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.order-detail{
  padding: 0 24rpx 140rpx;
  min-height: 100vh;
  background: var(--page-bg);
  box-sizing: border-box;
  .detail-status{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    height: 68rpx;
    color: #6D6D6D;
    &.active{
      color: #F86720;
    }
  }
  .detail-invitation{
    margin-bottom: 20rpx;
    border-radius: 20rpx;
    padding: 32rpx 24rpx;
    background: #fff;
    .doctor-item{
      margin-right: 20rpx;
      width: 114rpx;
      border-radius: 8rpx;
      overflow: hidden;
      border: 2rpx solid transparent;
      position: relative;
      margin-top: 12rpx;
      margin-bottom: 18rpx;
      &.active{
        border-color: var(--theme-color);
      }
      .img{
        width: 114rpx;
        height: 114rpx;
        display: block
      }
      .icon{
        position: absolute;
        right: 0;
        top: 0;
        width: 30rpx;
        height: 30rpx;
      }
      .h2{
        font-size: 22rpx;
        color: var(--title-color);
        line-height: 38rpx;
        text-align: center;
      }
    }
    .h2{
      font-size: 28rpx;
      font-weight: bold;
      color: var(--title-color);
    }
    .p{
      font-size: 22rpx;
      color: #B0B0B0;
      margin: 12rpx 0 18rpx
    }
    .var-button{
      font-size: 28rpx;
    }
  }
  .detail-header{
    margin: 0 0 24rpx;
    background: #fff;
    border-radius: 32rpx;
    padding: 24rpx;
    .box-flex{
      align-items: center;
    }
    .header-img{
      width: 28rpx;
      height: 28rpx;
      border-radius: 50%;
      margin-right: 8rpx;
    }
    .header-h2{
      flex: 1;
      font-size: 24rpx;
      font-weight: bold;
      color: var(--title-color);
    }
    .header-list{
      .list-item{
        display: flex;
        font-size: 22rpx;
        font-weight: 500;
        margin: 20rpx 0 0;
        .img{
          width: 124rpx;
          height: 124rpx;
          border-radius: 20rpx;
          margin-right: 24rpx;
        }
        .item-info{
          flex: 1;
          .info-h2{
            font-size: 30rpx;
            color: var(--title-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            .dot2{
              font-size: 26rpx;
              margin-right: 10rpx;
            }
          }
          .info-p{
            margin-top: 24rpx;
            font-size: 22rpx;
            color: var(--sub-title);
          }
        }
      }
    }
    .header-code{
      margin-top: 20rpx;
      border-top: 2rpx solid #efefef;
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      &.gray{
        opacity: .5;
        .line{
          text-decoration: line-through;
        }
      }
      .code-info{
        font-size: 26rpx;
        color: var(--title-color);
        .copy{
          color: #226EEE;
          margin-left: 20rpx;
        }
      }
    }
  }  /// detail-header end

  .detail-card{
    padding: 24rpx;
    background: #fff;
    border-radius: 20rpx;
    .card-title{
      font-size: 28rpx;
      font-weight: bold;
    }
  }
  .detail-cate{
    margin-bottom: 20rpx;
    .cate-p{
      display: flex;
      align-items: center;
      font-size: 26rpx;
      color: #6D6D6D;
      margin-bottom: 20rpx;
      &:last-child{
        margin-bottom: 0;
      }
      .p-label{
        color: var(--title-color);
        margin-right: 20rpx;
      }
      .p-span{
        flex: 1;
        display: flex;
        align-items: center;
        span{
          font-size: 22rpx;
          color: var(--sub-title);
          margin-left: auto;
        }
      }
    }
  }
  .detail-info{
    margin-bottom: 20rpx;
    .info-p{
      font-size: 24rpx;
      color: #6D6D6D;
      line-height: 40rpx;
    }
    .html{
      margin-top: 20rpx;
    }
  }
  .detail-intro{
    background: #fff;
    padding: 20rpx;
    border-radius: 32rpx;
    font-size: 26rpx;
    color: var(--title-color);
    margin-bottom: 20rpx;
    font-weight: bold;
    .intro-list{
      display: flex;
      align-items: center;
      margin-top: 20rpx;
      font-size: 26rpx;
      &:first-child{
        margin-top: 0;
      }
      &.title p{
        font-size: 28rpx;
        font-weight: bold!important;
        color: var(--title-color);
      }
      p{
        margin-right: auto;
        color: #6D6D6D;
        font-weight: 400;
      }
      .copy{
        line-height: 1;
        padding: 8rpx 22rpx;
        background: #f2f2f2;
        font-size: 24rpx;
        margin-left: 8rpx;
        border-radius: 4rpx;
        color: #6D6D6D;
      }
      .sub-theme{
        font-size: 22rpx;
        margin-left: 8rpx;
      }
      .strong{
        color: var(--sub-theme);
      }
    }
  }

  .popup-main{
    width: 75vw;
    border-radius: 64rpx;
    padding: 40rpx;
    background: #fff;
    .main-header{
      display: flex;
      .header-logo{
        width: 120rpx;
        height: 120rpx;
        margin-right: 24rpx;
      }
      h2{
        font-size: 28rpx;
      }
      .header-info{
        font-size: 24rpx;
        p{
          display: flex;
          align-items: center;
          &:first-child{
            margin-right: 20rpx;
          }
          image{
            width: 28rpx;
            height: 28rpx;
            margin-right: 6rpx;
          }
        }
      }
    }

    .main-code{
      margin-top: 40rpx;
      padding-top: 40rpx;
      border-top: 1px dashed #E5E7EB;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      p{
        font-size: 28rpx;
      }
    }
  }  ///  popup-main end
  
  .detail-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20rpx 24rpx;
    background: #fff;
    font-size: 28rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .button{
      line-height: 80rpx;
      font-size: 30rpx;
      color: #6D6D6D;
    }
    .cancel{
      border: 2rpx solid var(--border-color);
      border-radius: 80rpx;
      text-align: center;
      margin-right: 24rpx;
    }
    .var-button{
      width: 420rpx;
      color: #fff;
    }
  }

} //  order-detail end
</style>
